<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车结算</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .购物车栏 {
            width: 990px;
            margin: 100px auto 0;
        }

        .商品 {
            padding: 15px;
            transition: all .5s;
            display: flex;
            border-top: 1px solid #e4e4e4;
        }

        .商品:nth-child(4n) {
            margin-left: 0;
        }

        .商品:hover {
            cursor: pointer;
            background-color: #f5f5f5;
        }

        .商品 img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
        }

        .商品 .产品名称 {
            font-size: 18px;
            margin-right: 10px;
            color: #333;
            flex: 2;
        }

        .商品 .产品名称 .赠品 {
            display: block;
            padding: 2px;
            font-size: 12px;
            color: #999;
        }

        .商品 .产品价格,
        .商品 .单品总计 {
            font-size: 18px;
            color: firebrick;
            flex: 1;
        }

        .商品 .产品价格::before,
        .商品 .单品总计::before,
        .购物车总金额::before {
            content: "¥";
            font-size: 12px;
        }

        .商品 .规格 {
            flex: 2;
            color: #888;
            font-size: 14px;
        }

        .商品 .计数 {
            flex: 1;
            color: #aaa;
        }

        .总计价栏 {
            width: 990px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #e4e4e4;
            padding: 20px;
        }

        .总计价栏 .购物车总金额 {
            font-size: 18px;
            color: firebrick;
            font-weight: bold;
            margin-right: 50px;
        }
    </style>
</head>
<body>
<div class="购物车栏">
    <!-- <div class="商品">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="产品名称">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="赠品">【赠品】10优惠券</span></p>
      <p class="规格">白色/10寸</p>
      <p class="产品价格">289.90</p>
      <p class="计数">x2</p>
      <p class="单品总计">579.80</p>
    </div> -->
</div>
<div class="总计价栏">
    <div>合计：<span class="购物车总金额">1000.00</span></div>
</div>

<!--
需求：
根据后台提供的数据，渲染购物车页面

分析业务模块：
①：渲染图片、标题、颜色、价格、赠品等数据
②：单价和小计模块
③：总价模块
-->
<script>
    // 后台数据
    const 后台数据_商品清单 = [
        {
            id: '4001172',
            产品名称: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
            产品价格: 289.9,
            产品图片地址: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
            计数: 2,
            规格: {color: '白色'}
        },
        {
            id: '4001009',
            产品名称: '竹制干泡茶盘正方形沥水茶台品茶盘',
            产品价格: 109.8,
            产品图片地址: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
            计数: 3,
            规格: {size: '40cm*40cm', color: '黑色'}
        },
        {
            id: '4001874',
            产品名称: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
            产品价格: 488,
            产品图片地址: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
            计数: 1,
            规格: {color: '青色', sum: '一大四小'}
        },
        {
            id: '4001649',
            产品名称: '大师监制龙泉青瓷茶叶罐',
            产品价格: 139,
            产品图片地址: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
            计数: 1,
            规格: {size: '小号', color: '紫色'},
            赠品: '50g茶叶,清洗球,宝马, 奔驰'
        }
    ]

    // 渲染页面,根据后台数据
    // map返回一个,重新编辑的数组,  map遍历数组
    const 渲染数据_数组 = 后台数据_商品清单.map(元素 => {
        // 元素里是对象,对象里存储了 标签里要填写的数据
        const {产品名称, 产品价格, 产品图片地址, 计数, 规格, 赠品} = 元素 // 对象解构
        const 单品总计 = 产品价格 * 计数

        // '规格' 还是一个对象,不能直接赋值,要把它变成字符串
        // Object.values 把对象,属性的值 都取余出来,返回一个数组.  join 把数组元素 拼接成一个字符串, 这里以 / 作为,分隔符
        const 规格文本 = Object.values(规格).join('/')

        // 赠品部分 问题,不是所有的商品都有赠品,所以要求先识别  //  => 箭头函数
        const 赠品文本字符串 = 赠品 ? 赠品.split(',').map(元素 => `<span class="赠品">${元素}</span>`).join('') : ''
        // 说明:这里使用三元表达式, 如果检查到有 '赠品'变量,就执行代码, 如果没有就赋值空字符串.  因为后台数据里不是所有的对象都有 '赠品'属性
        // split字符串变数组, map数组返回一个新编辑好的数组, join把数组在变成一个字符串
        // 字符串 --> 数组 --> 新数组 -- 字符串

        return `
        <div class="商品">
          <img src="${产品图片地址}" alt="">
          <p class="产品名称">${产品名称} ${赠品文本字符串}</p>
          <p class="规格">${规格文本}</p>
          <p class="产品价格">${产品价格.toFixed(2)}</p> <!-- toFixed保留小数点 -->
          <p class="计数">x${计数}</p>
          <p class="单品总计">${单品总计.toFixed(2)}</p>
        </div>
        `
    })
    // join把数组,变成预估字符串
    const 渲染数据_字符串 = 渲染数据_数组.join('')
    const 购物车栏 = document.querySelector('.购物车栏') // 获取DOM元素
    购物车栏.innerHTML = 渲染数据_字符串 // 修改标签的内容, 这里是把字符串数据添加进去,完成渲染页面


    // 渲染计算总金额
    // 额外说明: 小数点计算存在精度问题, 解决方法把所有数变成整数在运算, 运算完在变成小数.   保留两位小数，所以乘以 100  最后除以100(题外话,这里其实意义不大,教程介绍所以加上)
    let 购物车总金额 = 后台数据_商品清单.reduce((累计和, 元素) => 累计和 + (元素.产品价格*100 * 元素.计数)/100, 0) // 这里注意,元素是对象,要加个 起始值0
    // reduce 累计器
    console.log(购物车总金额)
    const span_购物车总金额 = document.querySelector('.购物车总金额') // 获取DOM元素
    span_购物车总金额.innerHTML = 购物车总金额.toFixed(2) // 保留2位小数点

</script>
</body>
</html>